import {
  Button,
  DatePicker,
  Input,
  InputNumber,
  message,
  Radio,
  Form,
  Select,
  Row,
  TimePicker,
  Popconfirm
} from "antd";
import moment from "moment";
import React from "react";
const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

// 1 – 文本
// 2 – 下拉列表
// 3 – 数字
// 4 – 日期
// 5 – 时间
// 6 – 日期时间
// 7 – URL连接

const SearchAdtionalTypeOptions = {
  // 自定义字段的类型，为枚举类型
  1: {
    // 文本
    type: "input",
    filterOptionsType: "text",
  },
  2: {
    // 下拉列表
    type: "select",
    filterOptionsType: "select",
  },
  3: {
    // 数字
    type: "num",
    filterOptionsType: "num",
  },
  4: {
    // 日期
    type: "date",
    filterOptionsType: "date",
  },
  5: {
    // 时间
    type: "time",
    filterOptionsType: "time",
  },
  6: {
    // 日期时间
    type: "datetime",
    filterOptionsType: "datetime",
  },
  7: {
    // URL连接
    type: "text",
    filterOptionsType: "text",
  },
};

const FilterTypes = {
  // 筛选类型 rendertype: 1:单个文本框  2：选择框   3：数字框单个  4：两个数字框  5：datepicker  6：daterange  7：timepicker  8：timeRange
  text: {
    // 1-文本包含 2-文本不包含 3-文本为 4-开头为 5-结尾为
    options: [
      { value: "1", label: "文本包含", renderType: "1" },
      { value: "2", label: "文本不包含", renderType: "1" },
      { value: "3", label: "文本为", renderType: "1" },
      { value: "4", label: "开头为", renderType: "1" },
      { value: "5", label: "结尾为", renderType: "1" },
    ],
  },
  select: {
    //  9-包含 10-不包含
    options: [
      { value: "9", label: "包含", renderType: "2" },
      { value: "10", label: "不包含", renderType: "2" },
    ],
  },
  num: {
    //  6-大于 7-介于 8-小于
    options: [
      { value: "6", label: "大于", renderType: "3" },
      { value: "7", label: "介于", renderType: "4" },
      { value: "8", label: "小于", renderType: "3" },
    ],
  },
  date: {
    // 11-开始日期 12-结束日期
    options: [
      // { value: "11", label: "开始日期", renderType: "5" },
      { value: "7", label: "在期间", renderType: "6" },
      // { value: "12", label: "结束日期", renderType: "5" },
    ],
  },
  time: {
    // 11-开始日期 12-结束日期
    options: [
      // { value: "11", label: "开始时间", renderType: "7" },
      // { value: "12", label: "结束时间", renderType: "7" },
      { value: "7", label: "在期间", renderType: "8" },
    ],
  },
  datetime: {
    // 11-开始日期 12-结束日期
    options: [
      // { value: "11", label: "开始时间", renderType: "9" },
      // { value: "12", label: "结束时间", renderType: "9" },
      { value: "7", label: "在期间", renderType: "10" },
    ],
  },
};
class MyFormItem extends React.Component {
  componentDidMount() {}
  onChangeOriginal = (e) => {
    this.props.onChangeOriginal(e);
  };
  onColumnChange = (e) => {
    console.log('e', e)
    console.log('this.props.SearchAdtionalOptions', this.props.SearchAdtionalOptions)
    const current = this.props.SearchAdtionalOptions.find((i) => i.column == e);
    console.log(current, e);
    this.onChangeOriginal({
      columnName: e,
      columnType: current.columnType,
      filter: undefined,
      startVal: undefined,
      endVal: undefined,
    });
  };

  onFilterTypeChange = (e) => {
    // 更改与，或选项
    this.onChangeOriginal({
      filterType: e.target.value,
    });
  };
  onFilterChange = (e) => {
    this.onChangeOriginal({
      filter: e,
      renderType: FilterTypes[e],
      startVal: undefined,
      endVal: undefined,
    });
  };
  changeIptValue = (e) => {
    this.onChangeOriginal({
      startVal: e.target.value,
    });
  };
  changeSelectValue = (e) => {
    console.log(Array.isArray(e), e);
    if (Array.isArray(e)) {
      this.onChangeOriginal({
        startVal: e.join(","),
      });
    } else {
      this.onChangeOriginal({
        startVal: e,
      });
    }
  };
  changeDateValue = (e) => {
    this.onChangeOriginal({
      startVal: e && moment(e).format("YYYY-MM-DD"),
    });
  };
  changDateTimeValue = (e) => {
    console.log(e);
    this.onChangeOriginal({
      startVal: e && moment(e).format("YYYY-MM-DD HH:mm:ss"),
    });
  };
  changeDateRangeValue = (e) => {
    console.log(e);
    this.onChangeOriginal({
      startVal: e && e[0] && moment(e[0]).format("YYYY-MM-DD"),
      endVal: e && e[1] && moment(e[1]).format("YYYY-MM-DD"),
    });
  };
  changeTimeStartValue = (e, timeString) => {
    console.log(e);
    this.onChangeOriginal({
      startVal: timeString,
    });
  }
  changeTimeEndValue = (e, timeString) => {
    console.log(e);
    this.onChangeOriginal({
      endVal: timeString,
    });
  }
  changeDateTimeRangeValue = (e) => {
    console.log(e);
    this.onChangeOriginal({
      startVal: e && e[0] && moment(e[0]).format("YYYY-MM-DD HH:mm:ss"),
      endVal: e && e[1] && moment(e[1]).format("YYYY-MM-DD HH:mm:ss"),
    });
  };
  changeIntValue = (e) => {
    this.onChangeOriginal({
      startVal: `${e}`,
    });
  };
  changeMaxValue = (e) => {
    this.onChangeOriginal({
      endVal: `${e}`,
    });
  };
  changeMinValue = (e) => {
    this.onChangeOriginal({
      startVal: e,
    });
  };
  render() {
    const original = this.props.original;
    const { SearchAdtionalOptions } = this.props;
    console.log('SearchAdtionalOptions-----', SearchAdtionalOptions)
    // const {
    //   key,
    //   baseValue,
    //   maxValue,
    //   filterType,
    //   conditionType,
    //   minValue
    // } = original;
    const {
      columnName, // 字段对应数据库列名
      columnType, // 字段类型
      filter, // 筛选条件：1-文本包含 2-文本不包含 3-文本为 4-开头为 5-结尾为 6-大于 7-介于 8-小于 9-包含 10-不包含 11-开始日期 12-结束日期
      startVal,
      endVal,
      defaultField,
      filterTypeLock,
      filterType, // 筛选关系：1-与 2-或 (第一个无值) 默认为1
    } = original;
    const current = columnName
      ? SearchAdtionalOptions.find((i) => i.column == columnName)
      : undefined;
    const filterInfo =
      current &&
      columnType &&
      FilterTypes[SearchAdtionalTypeOptions[`${columnType}`].filterOptionsType];
      console.log('current--' ,current)
      console.log('filtertyopes', columnType)
      console.log('filterInfo', filterInfo)
    // const extra = current && current.extra && (typeof current.extra === 'string' ? JSON.parse(current.extra) : current.extra);
    const extra = current && current.extra;
    console.log('extra', extra)
    const renderType =
      filter &&
      filterInfo &&
      filterInfo.options.find((i) => i.value == filter).renderType;
    return (
      <div style={{ paddingBottom: "20px" }}>
        {this.props.itemIndex != 0 && (
          <FormItem label="" {...this.props.formItemLayout}>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <Radio.Group
                onChange={this.onFilterTypeChange}
                disabled={filterTypeLock}
                value={`${filterType}`}
              >
                <Radio value={"1"}>与</Radio>
                <Radio value={"2"}>或</Radio>
              </Radio.Group>
            </div>
          </FormItem>
        )}
        <FormItem label="请选择字段" {...this.props.formItemLayout}>
          <Select
            placeholder="请选择字段"
            disabled={defaultField}
            style={{ width: 400 }}
            value={columnName}
            onChange={this.onColumnChange}
          >
            {SearchAdtionalOptions.map((i) => (
              <Option key={i.column} disabled={i.disabled} value={i.column}>
                {i.name}
              </Option>
            ))}
          </Select>
          {
            this.props.itemIndex != 0 && (
              <Popconfirm
                title={'确认要删除吗'}
                onConfirm={this.props.onDel}
              >
                <Button style={{ marginLeft: "30px" }} type="danger">
                  删除
                </Button>
              </Popconfirm>
            )
          }
        </FormItem>

        <FormItem label="请选择筛选条件" {...this.props.formItemLayout}>
          <Select
            placeholder="请选择筛选方式"
            style={{ width: 400 }}
            value={filter}
            onChange={this.onFilterChange}
          >
            {current &&
              filterInfo &&
              filterInfo.options.map((i) => (
                <Option key={`${columnName}-${i.value}`} value={i.value}>
                  {i.label}
                </Option>
              ))}
          </Select>
        </FormItem>
        {renderType && (
          <FormItem label="  " {...this.props.formItemLayout}>
             <div>
            {/* <div style={{ display: "flex", justifyContent: "center" }}> */}
              {/* 筛选类型 rendertype: 1:单个文本框  2：选择框   3：数字框单个  4：两个数字框  5：datepicker  6：daterange  7：timepicker  8：timeRange */}
              {renderType == "1" && (
                <Input
                  placeholder="请输入"
                  style={{ width: 400 }}
                  value={startVal}
                  onChange={this.changeIptValue}
                ></Input>
              )}
               {renderType == "2" && (
                <>
                  <Select
                    placeholder="请选择"
                    style={{ width: 400 }}
                    mode={
                      extra &&
                      typeof extra == "string" ? 
                      (JSON.parse(extra).selectType == '1' ? "multiple" : "")
                      : (extra.selectType == '1' ? "multiple" : "")
                    }
                    value={
                      extra && typeof extra == "string" ?
                      (JSON.parse(extra).selectType == "0" || JSON.parse(extra).selectType == "1") &&
                      (JSON.parse(extra).selectType == "1"
                        ? startVal
                          ? startVal.split(",")
                          : undefined
                        : startVal)
                      : (extra.selectType == "0" || extra.selectType == "1") &&
                      (extra.selectType == "1"
                        ? startVal
                          ? startVal.split(",")
                          : undefined
                        : startVal)
                    }
                    onChange={this.changeSelectValue}
                  >
                    {extra &&
                      typeof current.extra !== "string" &&
                      extra.optionList &&
                      extra.optionList.filter(i => !!!i.hideInOption).map((i) => {
                        return (
                          <Option
                            key={`${columnName}-select-${i.label}-${i.value}`}
                            value={i.value}
                          >
                            {i.label}
                          </Option>
                        );
                      })}
                    {extra &&
                      typeof current.extra == "string" &&
                      JSON.parse(extra).optionList &&
                      JSON.parse(extra).optionList.map((i) => {
                        return (
                          <Option
                            key={`${columnName}-select-${i}`}
                            value={`${i}`}
                          >
                            {i}
                          </Option>
                        );
                      })}
                  </Select>
                </>
              )}
              {renderType == "3" && (
                <InputNumber
                  placeholder="请输入" 
                  style={{ width: 400 }}
                  max={100000000000}
                  min={-100000000000}  
                  precision={extra ? (parseInt(extra) >= 4 ? 4 : parseInt(extra)) : 0}
                  formatter={value => {
                    return Math.abs(value) > 100000000000 ? (value <0 ? -100000000000 : 100000000000) : value
                  }}
                  parser={value => {
                    return Math.abs(value) > 100000000000 ? (value <0 ? -100000000000 : 100000000000) : value
                  }}
                  value={startVal}
                  onChange={this.changeIntValue}
                ></InputNumber>
              )}
              {renderType == "4" && (
                <Row style={{ width: "100%" }} justify="space-around">
                  <InputNumber
                    placeholder="请输入最小值"
                    style={{ width: "45%" }}
                    precision={extra ? (parseInt(extra) >= 4 ? 4 : parseInt(extra)) : 0}
                          max={100000000000}
                          min={-100000000000}  
                    formatter={value => {
                      return Math.abs(value) > 100000000000 ? (value <0 ? -100000000000 : 100000000000) : value
                    }}
                    parser={value => {
                      return Math.abs(value) > 100000000000 ? (value <0 ? -100000000000 : 100000000000) : value
                    }}
                    value={startVal}
                    onChange={this.changeIntValue}
                  ></InputNumber>
                  <InputNumber
                    placeholder="请输入最大值"
                    style={{ width: "45%" }}
                    precision={extra ? (parseInt(extra) >= 4 ? 4 : parseInt(extra)) : 0}
                    max={100000000000}
                    min={-100000000000}  
                    formatter={value => {
                      return Math.abs(value) > 100000000000 ? (value <0 ? -100000000000 : 100000000000) : value
                    }}
                    parser={value => {
                      return Math.abs(value) > 100000000000 ? (value <0 ? -100000000000 : 100000000000) : value
                    }}
                    value={endVal}
                    onChange={this.changeMaxValue}
                  ></InputNumber>
                </Row>
              )}
              {renderType == "5" && (
                <Row justify="space-between">
                  <DatePicker
                    style={{ width: 400 }}
                    value={startVal && moment(startVal)}
                    format="YYYY-MM-DD"
                    placeholder="请选择日期"
                    onChange={this.changeDateValue}
                  />
                </Row>
              )}
              {renderType == "6" && (
                <Row style={{ width: "100%" }} justify="space-between">
                  <RangePicker
                    style={{ width: 400 }}
                    format="YYYY-MM-DD"
                    value={[
                      startVal && moment(startVal),
                      endVal ? moment(endVal) : undefined,
                    ]}
                    onChange={this.changeDateRangeValue}
                  ></RangePicker>
                </Row>
              )}
              {renderType == "7" && (
                <Row style={{ width: "100%" }} justify="space-between">
                  <TimePicker value={startVal ? moment(startVal, 'HH:mm:ss') : undefined} style={{ width: 400 }} onChange={this.changeTimeStartValue} format="HH:mm:ss" />
                </Row>
              )}
              {renderType == "8" && (
                <Row style={{ width: "100%" }} justify="space-between">
                  <TimePicker value={startVal ? moment(startVal, 'HH:mm:ss') : undefined} style={{ width: "45%" }} onChange={this.changeTimeStartValue} format="HH:mm:ss" />
                  <TimePicker value={endVal ? moment(endVal, 'HH:mm:ss') : undefined} style={{ width: "45%" }} onChange={this.changeTimeEndValue} format="HH:mm:ss" />
                </Row>
              )}
              {renderType == "9" && (
                <Row style={{ width: "100%" }} justify="space-between">
                  <DatePicker
                    style={{ width: 400 }}
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择日期时间"
                    value={startVal ? moment(startVal) : undefined}
                    onChange={this.changDateTimeValue}
                  />
                </Row>
              )}
              {renderType == "10" && (
                <Row style={{ width: "100%" }} justify="space-between">
                  <RangePicker
                    style={{ width: 400 }}
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    value={[startVal ? moment(startVal) : undefined, endVal ? moment(endVal) : undefined]}
                    onChange={this.changeDateTimeRangeValue}
                  ></RangePicker>
                </Row>
              )}
            </div>
          </FormItem>
        )}
        
      </div>
    );
  }
}
export default MyFormItem;
